<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList"
		:loading-more-custom-style="{ paddingBottom: 'env(safe-area-inset-bottom)' }">
		<template #top>
			<view class="zpagin_top">
				<nav-bar :iconLeft="true" />
				<view class="search">
					<custom-search v-model="queryParams.search" @search="refreshList" placeholder="请输入客户类型名称" />
				</view>
				<dui-float-ball @touchFunc="touchFunc" v-if="$hasPerm(['30201'])" />
			</view>
		</template>
		<u-swipe-action>
			<u-swipe-action-item v-for="item in dataList" :key="item.id"
				:name="JSON.stringify(swipeActPer(options, null)) + '&' + item.id + '&' + item.name"
				:options="swipeActPer(options, null)" :disabled="swipeActPer(options, null, 'disabled')" @click="action">
				<uni-card :title="item.name" margin="0" spacing="0">
					<view>创建时间：{{ item.create_date }}</view>
					<view class="con" style="align-items: normal;">
						<view class="ctent" style="flex: none;">备注：</view>
						<view class="ctent">{{ item.desc }}</view>
					</view>
				</uni-card>
			</u-swipe-action-item>
		</u-swipe-action>
		<template #bottom>
			<custom-popup :popupShow="popupShow" mode="center" :title="titlePop" width="96%" :closeable="false"
				:closeOnClickOverlay="false">
				<view style="background-color: #fff; padding: 20rpx 30rpx;">
					<uni-forms labelPosition="left" :model="form" :rules="rules" ref="refForm" labelWidth="100px">
						<uni-forms-item label="类型名称" name="name" required>
							<uni-easyinput v-model="form.name" placeholder="请输入类型名称" class="iptBor" :inputBorder="false" />
						</uni-forms-item>
						<uni-forms-item label="备注" name="desc">
							<uni-easyinput type="textarea" v-model="form.desc" placeholder="请输入备注" />
						</uni-forms-item>
					</uni-forms>
					<view class="btn-box">
						<u-button text="取 消" @click="cancal"></u-button>
						<u-button type="primary" text="提 交" @click="save"></u-button>
					</view>
				</view>
			</custom-popup>
		</template>
	</z-paging>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import clClassifyApi from '../../../api/clientt/cl_classify'
import { swipeActPer } from '@/utils/permission' // 用防抖优化请求频率（下面给出）
uni.$bus.useBusOn('cl_classify:refresh', refreshList)


	;
const options = [
	{
		text: '修改',
		per: '30202',
		style: {
			backgroundColor: '#0081ff'
		}
	}, {
		text: '删除',
		per: '30203',
		style: {
			backgroundColor: '#f56c6c'
		}
	}
];

const queryParams = reactive({
	search: '',
});
const paging = ref(null);
const dataList = ref([]);
function queryList(pageNo, pageSize) {
	const params = {
		page: pageNo,
		page_size: pageSize,
		...queryParams
	}
	clClassifyApi.get_client_classify(params).then((res) => {
		paging.value.complete(res.results);
	})
};

//滑动操作按钮
function action(v) {
	const options = JSON.parse(v.name.split("&")[0])
	const id = v.name.split("&")[1]
	const delName = v.name.split("&")[2]
	const index = v.index
	if (options[index].text == '修改') {
		titlePop.value = '修改'
		get_detail(id)
	}
	if (options[index].text == '删除') {
		delete_type(id, delName)
	}
};


const refForm = ref(null);
const form = reactive({
	id: null,
	name: '',
	desc: '',
});
const fields = Object.keys(form);
const rules = {
	name: { rules: [{ required: true, errorMessage: '请输入客户类型名称' }] },
};

const titlePop = ref('单位弹窗')
const popupShow = ref(false)
function touchFunc() {
	titlePop.value = '新增'
	popupShow.value = true
}
function get_detail(id) {
	clClassifyApi.client_classify_detail(id).then(res => {
		const record = uni.$lodash.pick(res, fields)
		Object.assign(form, record)
		popupShow.value = true
	})
}

function save() {
	refForm.value.validate().then(() => {
		const params = uni.$lodash.cloneDeep(form) // 深拷贝一份form表单
		params.classify = 2
		if (titlePop.value == '新增') {
			clClassifyApi.post_client_classify(params).then(res => {
				uni.$u.toast('添加成功')
				setTimeout(() => {
					cancal()
					refreshList();
				}, 500)
			})
		} else {
			//修改
			clClassifyApi.patch_client_classify(params, params.id).then((res) => {
				uni.$u.toast('修改成功')
				setTimeout(() => {
					cancal()
					refreshList();
				}, 500)
			})
		}
	}).catch((error) => {
		uni.$u.toast(error[0].errorMessage);
	})
};
function cancal() {
	popupShow.value = false
	Object.assign(form, {
		id: null,
		name: '',
		desc: '',
	})
}

//删除操作
function delete_type(id, delName) {
	uni.showModal({
		title: '提示',
		content: `确认要删除：【${delName}】的类型吗？`,
		success: (res) => {
			if (res.confirm) {
				clClassifyApi.delete_client_classify(id).then((res) => {
					uni.$u.toast('删除成功')
					setTimeout(() => {
						refreshList();
					}, 500)
				})
			}
		}
	});
};

//编辑跳转刷新
function refreshList() {
	paging.value.reload();
};
</script>

<style lang="scss"></style>